<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <!-- 搜索条件盒子 -->
      <div>
        <p class="pinformation">搜索条件</p>
        <el-form :model="queryParams" label-width="90" ref="queryRef">
          <el-row>
            <el-col :span="16">
              <el-form-item label="供应商名称：" prop="supplyName">
                <el-input clearable placeholder="请输入供应商名称" v-model="queryParams.supplyName" maxlength="100"
                  @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-row justify="center">
                <el-button type="success" @click="handleQuery">搜索</el-button>
                <el-button class="resetBtn" @click="resetQuery">重置</el-button>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="经营性质：" prop="businessNature">
                <el-select v-model="queryParams.businessNature" placeholder="请选择经营性质" clearable style="width: 100%">
                  <el-option v-for="dict in sys_business_nature" :key="parseInt(dict.value)" :label="dict.label"
                    :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否合格：" label-width="80" prop="isQualified">
                <el-select v-model="queryParams.isQualified" placeholder="请选择" clearable>
                  <el-option label="合格" :value="0"></el-option>
                  <el-option label="不合格" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 供应商列表 -->
      <div>
        <el-row style="justify-content: space-between">
          <el-row>
            <p class="pinformation">供应商列表</p>
            <p class="totalStyle">共 {{ total }} 条数据</p>
          </el-row>
          <el-row style="margin-bottom: 5px">
            <el-button type="success" link @click="handleAdd">
              <el-icon>
                <Plus />
              </el-icon>新增
            </el-button>
          </el-row>
        </el-row>
        <el-table class="business" v-loading="loading" :row-class-name="tableRowClass" :data="supplierList"
          ref="mainTableRef" @row-click="rowClick">
          <el-table-column label="供应商名称" align="center" prop="supplyName" />
          <el-table-column label="经营性质" align="center" prop="businessNature">
            <template #default="scope">
              <dict-tag :options="sys_business_nature" :value="scope.row.businessNature" />
            </template>
          </el-table-column>
          <el-table-column label="是否合格" align="center" prop="isQualified">
            <template #default="scope">
              {{ scope.row.isQualified ? "不合格" : "合格" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="success" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>
    <el-card class="rightCard">
      <el-tabs v-model="activityName" class="demo-tabs">
        <el-tab-pane label="基本信息" name="first">
          <information ref="informationRef" @add="handleSave"></information>
        </el-tab-pane>
        <!-- <el-tab-pane label="业务往来" name="second">
          <communication></communication>
        </el-tab-pane>
        <el-tab-pane label="能力评价" name="third">
          <evaluate></evaluate>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup name="Supplier">
import information from "./rightCommon/information.vue";
import communication from "./rightCommon/communication.vue";
import evaluate from "./rightCommon/evaluate.vue";

import { listSupplier, delSupplierList } from "@/api/buy/supplier";
import { nextTick } from "vue";

const { proxy } = getCurrentInstance();

const { sys_business_nature } = proxy.useDict("sys_business_nature");

// ---------------------左侧操作----------------------
const queryParams = ref({ pageNum: 1, pageSize: 10 });
const total = ref(0);
const loading = ref(false);
const supplierList = ref([]);

const heightBright = ref("");

function getList() {
  loading.value = true;
  listSupplier(queryParams.value).then((res) => {
    supplierList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}

getList();

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function handleAdd() {
  activityName.value = "first";
  heightBright.value = "";
  nextTick(() => {
    informationRef.value.resetData()
  });
}

function handleDelete(row) {
  proxy.$modal.confirm("确定要删除吗？").then(() => {
    delSupplierList(row.supplyId).then(res => {
      proxy.$modal.msgSuccess('删除成功')
      handleAdd()
      getList()
    })
  });
}

function rowClick(row) {
  activityName.value = "first";
  heightBright.value = row.supplyId;
  nextTick(() => {
    informationRef.value.getList(row.supplyId)
  });
}

function tableRowClass({ row }) {
  if (row) {
    if (row.supplyId == heightBright.value) {
      return "current-row";
    }
    return "";
  }
}

// --------------------右侧基础信息-------------------
const activityName = ref("first");
const informationRef = ref(null);

function handleSave(val) {
  heightBright.value = val;
  getList();
}

// --------------------表格自定义高度-------------------
watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [{ tableName: "main", bottomHeight: 73 }];
    } else {
      heightParams.value = [{ tableName: "main", bottomHeight: 21 }];
    }
    getTableHeight();
  }
);

const heightParams = ref([{ tableName: "main", bottomHeight: 21 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
})

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>
